<template>
  <div
    class="base-view group/top text-light-500 fixed top-0 w-full md:h-nav font-regular text-base z-40"
  >
    <div
      class="base-view text-white top_nav absolute top-0 bottom-0 w-full backdrop-blur-2xl bg-gradient-to-r from-black/60 to-black/60 bg-[rgba(92,92,92,0.5)] flex"
    >
    <div class="flex-none flex items-center justify-center ml-5"> left contetn </div>
    <div class="flex-grow flex flex-row justify-evenly items-center ml-5 mr-5"> 
      <div
        class=""
        v-for="(item, index) in menuArr"
        :key="index"
        @click="clickRow(index)"
      >
       <div >
        {{ item }}
       </div>
      </div>

    </div>
    <div class="flex-none flex items-center justify-center mr-5"> right contetn </div>

    </div>
  </div>
</template>

<script lang="ts" setup>
const menuArr = ref(["首页", "新闻", "文档", "更多"]);
const clickRow = (index: number) => {
  switch (index) {
    case 0:{
      navigateTo("/");

    }
    break
    case 1:
      {
        navigateTo("/news/newsIndex");
      }

      break;
      case 2:{
        navigateTo("/article/atricle");

      }
      break
    default:
      break;
  }
};
</script>

<style lang="scss" scoped>
.base-view {
  width: 100%;
  height: 56px;
  display: flex;
  flex-direction: row;
}
</style>
